import { Stack } from "@fluentui/react";
import Head from 'next/head';
import { ExternalLink } from '../components';
import { RouteStackProps } from "../utils";

<!--
cspell: ignore cybojenix
-->

This is a demo for my <ExternalLink href="https://github.com/yume-chan/ya-webadb/">ya-webadb</ExternalLink> project, which can use ADB protocol to control Android phones, directly from Web browsers (or Node.js).

It started because I want to try the <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/USB">WebUSB</ExternalLink> API, and because I have an Android phone. It's not production-ready, and I don't recommend normal users to try it. If you have any questions or suggestions, please file an issue at <ExternalLink href="https://github.com/yume-chan/ya-webadb/issues">here</ExternalLink>.

It was called "ya-webadb" (Yet Another WebADB), because there have already been several similar projects, for example:

* <ExternalLink href="https://github.com/webadb/webadb.js">webadb/webadb.js</ExternalLink>
* <ExternalLink href="https://github.com/cybojenix/WebADB">cybojenix/WebADB</ExternalLink>

However, they are all pretty simple and not maintained, so I decided to make my own.

## Security concerns

Accessing USB devices (especially your phone) directly from a web page can be **very dangerous**. Firefox developers even refused to implement the WebUSB standard because they <ExternalLink href="https://mozilla.github.io/standards-positions/#webusb">considered it to be **harmful**</ExternalLink>.

However, I'm pretty confident about this demo, and here is a few reasons:

1. Unlike native apps, web apps can't access your devices silently. In addition to the connection verification popup that comes with ADB, browsers ask users for permission and web apps can only access the device you choose.
2. All source code of this project is open sourced on <ExternalLink href="https://github.com/yume-chan/ya-webadb/">GitHub</ExternalLink>. You can review it yourself (or find someone you trust and knows coding to review it).
3. This site is built and deployed by <ExternalLink href="https://github.com/yume-chan/ya-webadb/blob/master/.github/workflows/nodejs.yml" spaceAfter>GitHub Actions</ExternalLink> to ensure that what you see is exactly the same as the source code.

## Compatibility

Currently, only Chromium-based browsers (Chrome, Microsoft Edge, Opera) support the WebUSB API. As mentioned before, it's unlikely for Firefox to implement it.

## FAQ

### Got "Unable to claim interface" error

One USB device can only be accessed by one application at a time. Please make sure:

1. Official ADB server is not running (stop it by `adb kill-server`).
2. No other Android management tools are running.
3. No other WebADB tabs have already connected to your device.

### Can I connect my device wirelessly (ADB over WiFi)?

Extra software is required to bridge the connection. See <ExternalLink href="https://github.com/yume-chan/ya-webadb/discussions/245#discussioncomment-384030">this discussion</ExternalLink>.

export default ({children}) => (
    <div style={{ height: '100%', padding: '0 16px', overflow: 'auto' }}>
        <Head>
            <title>WebADB</title>
        </Head>
        {children}
    </div>
);
